<template>
	<view class="wrap u-p-t-80 u-p-r-40 u-p-l-40">
		<view class="title">欢迎注册咚咚出版社</view>
		<u-steps class="u-p-b-30" :list="numList" :current="stepListCurrent" mode="number"></u-steps>
		<block v-if="stepListCurrent==-1" class="firstBlock">
			<u-field v-model="phone" @confirm="phoneBlur" @input="phoneInput" @blur="phoneBlur" label="手机号" placeholder="请输入手机号" required :error-message="phoneMsg"></u-field>
			<view class="u-flex u-row-between u-p-t-30 u-p-b-50">
				
				<u-message-input mode="middleLine" :breathe="false" @finish="finish" :focus="false"></u-message-input>
				<u-button @click="yzmBtn" :disabled="yzmBtnDisabled" type="primary" size="mini">{{yzmTip}}</u-button>
			</view>
			<button  @click="firstClick"  :disabled="firstSuccess" :style="[firstStyle]" class="getCaptcha">下一步</button>
			<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		</block>
		
		<block v-if="stepListCurrent==0">
			<u-field v-model="username" label="账号" placeholder="请输入账号" focus required :error-message="usernameMessage"></u-field>
			<u-field v-model="nickName" label="昵称" placeholder="请输入昵称"  required :error-message="nickNameMessage"></u-field>
			<u-field v-model="password" label="密码" placeholder="请输入密码" required :error-message="pwdMsg" password></u-field>
			<u-field v-model="password_confirmation" label="确认密码"  placeholder="请确认密码" required password :error-message="errorMessage"></u-field>
			
			
			<button @click="submit"  :disabled="submitBtn" :style="[inputStyle]" class="getCaptcha">注册</button>
		</block>
		<block v-if="stepListCurrent==2" class="threeStep">
			<!-- <image class="threeImg" src="../../static/img/success.png" style="width: 200rpx;height: 200rpx;"></image>
			<view class="threeTxt">注册成功</view> -->
			<button class="" @click="toLogin" type="primary">现在去登陆吧</button>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				numList: [{
					name: '手机验证'
				}, {
					name: '注册账号'
				}, {
					name: '注册成功'
				},  ],
				stepListCurrent:-1,
				// 用户注册参数
				username: "",
				nickName:'',
				phone: "",
				password: "",
				password_confirmation: "",
				firstSuccess:true,
				submitBtn:false,
				authCode:0,
				yzmTip:'',
				telErrorMsg:'',
				yzmBtnDisabled:true,
			};
		},
		onLoad() {
			this.yzmTip = '获取验证码'
			this.yzmBtnDisabled = true
		},
		computed:{
			firstStyle() {
				let style = {};
				// 全部验证通过，激活注册
				if(this.$u.test.isEmpty(this.telErrorMsg) && this.$u.test.mobile(this.phone) && this.firstSuccess == false) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['primary'];
				}
				return style;
			},
			inputStyle() {
				let style = {};
				// 全部验证通过，激活注册
				if(this.username && this.nickName && this.password && this.password_confirmation && this.password == this.password_confirmation) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['primary'];
				}
				return style;
			},
			nickNameMessage(){
				if(!this.nickName){
					return ''
				}
				if(!this.$u.test.rangeLength(this.nickName,[2,6])){
					this.submitBtn = true
					return '昵称长度需在2-6位'
				}else{
					this.submitBtn = false
					return ''
				}
			},
			usernameMessage(){
				if(!this.username){
					return ''
				}
				if(!this.$u.test.rangeLength(this.username,[6,16])){
					this.submitBtn = true
					return '账号长度需在6-16位'
				}else{
					this.submitBtn = false
					return ''
				}
			},
			phoneMsg(){
				if(!this.phone){
					return ''
				}
				if(!this.$u.test.mobile(this.phone)){
					this.telErrorMsg=''
					this.yzmBtnDisabled = true
					return '请填写正确手机号'
				}else{
					
					if(!this.$u.test.isEmpty(this.telErrorMsg)){
						this.yzmBtnDisabled = true
						
						return this.telErrorMsg
					}
					this.yzmBtnDisabled = false
					return ''
				}
				
			},
			pwdMsg(){
				if(!this.password){
					return ''
				}
				if(!this.$u.test.rangeLength(this.password,[6,16])){
					this.submitBtn = true
					return '密码长度需在6-16位'
				}else{
					this.submitBtn = false
					return ''
				}
			},
			errorMessage(){
				
				if(this.password!==this.password_confirmation && this.password_confirmation.length >= 6){
					this.submitBtn = true
					return '两次密码不一致'
				}else{
					this.submitBtn = false
					return ''
				}
			}
		},
		methods: {
			toLogin(){
				this.$u.route({
					type:"redirect",
					url:"/pages/auth/login",
					params:{account:this.phone}
				})
			},
			async phoneInput(){
				if(this.phone.length==11){
					this.judgeUserExistByTel()
				}
				
			},
			async phoneBlur(){
				if(this.phone.length==11){
					this.judgeUserExistByTel()
				}
				
			},
			async judgeUserExistByTel(){
				const res = await this.$u.api.judgeUserExistByTel(this.phone)
				this.telErrorMsg = res 
			},
			codeChange(text) {
				this.yzmTip = text;
			},
			async yzmBtn(){
				const res = await this.$u.api.judgeUserExistByTel(this.phone)
				
				if(!this.$u.test.isEmpty(res)){
					this.$u.toast('手机号已被注册');
					return
				}
				if(this.$refs.uCode.canGetCode) {
					// 向后端请求验证码
					
					const res = await this.$u.api.sendYzm(this.phone);
					if(!this.$u.test.isEmpty(res)){
						if(res.indexOf("发送成功")>0){
							setTimeout(() => {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								this.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							}, 2000);
						}else{
							this.$u.toast('发送失败');
							return
						}
						
					}else{
						this.$u.toast('请求失败');
						return
					}
					// uni.showLoading({
					// 	title: '正在获取验证码',
					// 	mask: true
					// })
					
					
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
					
				
			},
			async firstClick(){//第一步验证手机号码 和 验证码
				//  这边还要做验证码的判断
				const res = await this.$u.api.varifyYzm(this.phone,this.authCode)
				if(res == true){
					this.$u.toast("验证成功")
					setTimeout(() => {
						this.stepListCurrent = 0
						this.username = this.phone
					}, 1000);
					
				}
				
				
			},
			finish(e){
				// console.log('输入结束，当前值为：' + e);
				// 获取用户输入的验证码
				this.authCode = e
				if(this.authCode.length == 4){
					this.firstSuccess = false
				}
				
			},
			async toRegister() {
				try{
					//注册btn样式
					this.submitBtn=true
					// 准备提交参数
					const params = {
						tel: this.phone,
						username: this.username,
						nickName: this.nickName,
						password: this.password,
						email: null,
						headImg:null
					}
					// 注册接口
					const regRes = await this.$u.api.authRegister(params)
					this.submitBtn=false
					// 注册成功，重定向到登录（关闭注册页面）
					this.$u.toast('注册成功！')
					// 延时跳转
					setTimeout(()=>{
						this.stepListCurrent = 2
						// this.$u.route({
						// 	type:"redirect",
						// 	url:"/pages/auth/login",
						// 	params:{email:this.email,password:this.password}
						// })
					},1500)
				}catch(e){
					this.submitBtn=false
				}
			},
			submit(){
				if(this.phone && this.username && this.nickName && this.password && this.password_confirmation && this.password == this.password_confirmation){
					
					this.toRegister()
					
				}else{
					this.$u.toast('请填写正确参数')
					return false
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.wrap{
	height: 500px;
	.title {
		text-align: left;
		font-size: 60rpx;
		font-weight: 500;
		margin-bottom: 100rpx;
	}
	.getCaptcha {
		background-color: #a2b8ff;
		color: $u-tips-color;
		border: none;
		font-size: 30rpx;
		padding: 12rpx 0;
		
		&::after {
			border: none;
		}
	}
	.threeStep{
		width: 650rpx;
		.threeImg{
			margin: 20rpx 0;
			width: 200rpx;
			height: 200rpx;
		}
		.threeTxt{
			margin: 20rpx 0;
		}
	}
}
</style>
